<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: red;
    }

    body {
      height: 1500px;
    }
  </style>
</head>

<body>

  <!-- 
    浏览器当中存在着诸多事件，有不同的事件系统，比如点击事件，加载事件，动画事件，连接事件....
    可从MDN当中查询相对应的事件以及用法；

    只需要从一个事件出发 就可以推导其他事件的用法 大致都一样的；

    事件对象：回到函数的形参
      box.onclick = e => log(e) e就是 MouseEvent 对象
      鼠标事件的一些属性：
        altKey ctrKey shiftKey 对应的按键状态；
        
        offsetX offsetY 鼠标在元素中的位置 相对于元素内边框左上角的位置；
        
        pageX pageY 鼠标相对于页面左上角的位置；
        
        screenX screenY 鼠标相对于屏幕(显示器)左上角的位置；
        
        x y 鼠标相对于浏览器窗口可视区域左上角的位置；

        clientX clientY 与 x,y相同 建议使用clientX clientY；

      按键系统：
        建码和按键名
        e.key 按键名 字符串 可以统一转换为 小写来进行操作
        e.keyCode 建码 按键对应的ASCII码 [A-Z] 65~91 [a-z] 97~123

    

   -->

  <input type="text">

  <div class="box">你不能白嫖！</div>

  <script>
    const input = document.querySelector('input')
    const box = document.querySelector('.box')

    // 聚焦事件
    input.onfocus = function () {
      console.log('聚焦了！')
    }

    // 失焦事件
    input.onfocus = function () {
      console.log('失焦了！')
    }

    // 浏览器加载事件和调整视窗事件

    window.onload = window.onresize = debounce(resetEl, 500)

    // 事件处理函数
    function resetEl() {
      box.style.width = window.innerWidth / 3 + 'px'
      box.style.height = window.innerHeight / 3 + 'px'
    }

    // 防抖封装

    function debounce(fn, delay) {
      let timer = null

      return function () {
        timer && clearTimeout(timer)

        timer = setTimeout(() => {
          fn.apply(this, arguments)

        }, delay)
      }
    }

    // 滚动事件 触发频率相当高

    window.onscroll = debounce(f, 1000)

    function f() {
      console.log('滚完了');
    }

    // 阻止复制事件
    document.oncopy = function (e) {
      alert('要复制以下内容需要付费！')
      return fasle
    }

    // 禁用右键菜单
    input.oncontextmenu = function (e) {
      e.preventDefault() // 阻止默认事件
    }

    // 键盘事件
    let isDown = false

    // 按下按键
    window.onkeydown = function () {
      if (isDown) return

      isDown = true

      console.log('按键按下')
    }

    // 抬起按键
    window.onkeyup = function () {
      if (!isDown) return

      isDown = false

      console.log('按键抬起')
    }
    // 当然 上述写法是有 bug 的 需要针对每一个按键 单独设置状态

    // onmousedown onmousemove onmouseup 组合起来可以模拟拖拽行为

    let drag = false

    box.onmousedown = function () {
      drag = true
      console.log('抓住')
    }
    box.onmousemove = function () {
      if (drag) console.log('挪动')
    }
    window.onmouseup = function () {
      drag = false
      console.log('放下')
    }

    // 鼠标进入和移出 可用作选中或者高亮 定制化操作
    box.onmouseenter = function () {
      // 随机颜色
      this.style.backgroundColor = `#${Math.random().toString(16).slice(2,8)}`
      console.log('鼠标进入')
    }

    box.onmouseleave = function () {
      // 随机颜色
      this.style.backgroundColor = `purple`
      console.log('鼠标移出')
    }

    // 鼠标滚轮事件
    box.onwheel = function () {
      this.style.backgroundColor = `#${Math.random().toString(16).slice(2,8)}`
      console.log('滚起来了')
    }

    // 事件对象
    box.onclick = function (e) {
      console.log(e)
    }

    // 按键系统
    window.onkeydown = function (e) {
      console.log(e.key) // 按键名
      console.log(e.keyCode)
    }

    // 检测按键按下的时间
    let keyDown = false // 按键状态
    let date = null // 时间记录

    window.onkeydown = e => {

      if (keyDown) return

      if (e.key === ' ') {
        keyDown = true
        console.log(e.key + '被按下！')
        date = new Date() // 记录时间
      }
    }

    window.onkeyup = e => {

      if (e.key === ' ') {
        keyDown = false
        console.log(e.key + '抬起！')
        console.log((new Date() - date) / 1000 + 's') // 计算时间间隔
      }
    }
  </script>

</body>

</html>